<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }

        .inp {
            width: 300px;
            height: 30px;
        }

        .d1 {
            margin: auto;
            width: 500px;
        }
        input{
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <h1>待办事项</h1>
    
    <input type="text" class="inp"> <button onclick="add()">添加事项</button><br>
    <button onclick="del()">删除所有事项</button>
    <button onclick="over()">显示已完成</button>
    <button onclick="nover()">显示未完成</button>
    <button onclick="all()">查看所有事项</button>
    <h1>事项列表</h1>
    <div class="d1">

    </div>

    <script>
        var arr = []


        // 渲染列表
        var div = document.querySelector('div')
        function apply() {
            div.innerHTML = ''
            arr.forEach(item => {
                div.innerHTML += `<div class="d2">
         <input type="checkbox" ${item.is ? 'checked' : ''} onclick="is(${item.id})">
         <span>${item.text}</span>
         <button onclick="dele(${item.id})">删除</button><br>
        </div> `

            })
        }
        apply()

        // 添加事项
        function add() {
            var inp = document.querySelector('.inp').value
            arr.push({
                id: arr.length,
                text: inp,
                is: false
            })
            apply()


        }

        // 删除
        function dele(iid) {
            var index = arr.findIndex(item => item.id == iid)
            arr.splice(index, 1)
            apply()
            over()
            nover()
        }
        // 清除所有
        function del(iid) {
            arr = []
            apply()
        }


        // 选中

        function is(i) {
            var a = arr.find(item => item.id == i)
            a.is = true
        }

        // 显示已完成
        function over() {
            var a = arr.filter(item => item.is == true)
            div.innerHTML = ''
            a.forEach(item => {
                div.innerHTML += `<div class="d2">
                 <input type="checkbox" ${item.is ? 'checked' : ''} onclick="is(${item.id})">
         <span>${item.text}</span>
         <button onclick="dele(${item.id})">删除</button><br>
         </div>   
         `
            })
        }
        // 显示未完成
        function nover() {
            var a = arr.filter(item => item.is == false)
            div.innerHTML = ''
            a.forEach(item => {
                div.innerHTML += `<div class="d2">
                 <input type="checkbox" ${item.is ? 'checked' : ''} onclick="is(${item.id})">
         <span>${item.text}</span>
         <button onclick="dele(${item.id})">删除</button><br>
         </div>       
         `
            })
        }


    </script>

</body>

</html>